//1.引入Vue
import Vue from "vue";

//2.引入VueRouter
import VueRouter from "vue-router";

import store from "@/store";

//路由懒加载
const Register = () => import("@pages/Register");
const Login = () => import("@pages/Login");
const Home = () => import("@pages/Home");
const Search = () => import("@pages/Search");
const Detail = () => import("@pages/Detail");
const AddCartSuccess = () => import("@pages/AddCartSuccess");
const ShopCart = () => import("@pages/ShopCart");
const Trade = () => import("@pages/Trade");
const Pay = () => import("@pages/Pay");
const PaySuccess = () => import("@pages/PaySuccess");
const Center = () => import("@pages/Center");

//3.使用插件
Vue.use(VueRouter);

//重写vueRouter的push方法
//1.获取原来的push方法
const lastPush = VueRouter.prototype.push
//2.重写
VueRouter.prototype.push = function (location, onComplete = () => {}, onAbort = () => {}) {
    return lastPush.call(this, location, onComplete, onAbort)
}

//4.插件路由器对象并暴露
const router =  new VueRouter({
    scrollBehavior () {
        // return 期望滚动到哪个的位置
        return{
            x: 0,
            y: 0
        }
    },
    //history模式
    mode: "history",
    routes: [{
            path: "/register",
            component: Register,
            name: "register",
            meta: {
                isFooterHidden: true
            }
        },
        {
            path: "/login",
            component: Login,
            name: "login",
            meta: {
                isFooterHidden: true
            },
            beforeEnter(to , from , next){
                if(store.state.user.token){
                    next("/")
                }else{
                    next()
                }
            }
        },
        {
            path: "/home",
            component: Home,
            name: "home"
        },
        {
            path: "/search/:keyword?",
            component: Search,
            name: "search"
        },
        {
            path: "/detail/:skuId",
            component: Detail,
            name: "detail"
        },
        {
            path: "/addCartSuccess",
            component: AddCartSuccess,
            name: "addCartSuccess",
            //路由独享守卫，限制只有添加购物车成功才能进入
            beforeEnter(to , from , next){
                if(sessionStorage.getItem("cartData")){
                    next()
                }else{
                    next("/shopCart")
                }
            }
        },
        {
            path: "/shopCart",
            component: ShopCart,
            name: "shopCart"
        },
        {
            path: "/trade",
            component: Trade,
            name: "trade"
        },
        {
            path: "/pay",
            component: Pay,
            name: "pay"
        },
        {
            path: "/paysuccess",
            component: PaySuccess,
            name: "paysuccess"
        },
        {
            path: "/center",
            component: Center,
            name: "center"
        },
        //重定向
        {
            path: "/",
            redirect: "/home"
        }
    ]
})

//全局前置守卫权限校验
router.beforeEach((to , from , next) => {
    //拿到需要权限校验的路径组成的数组
    const checkedPath = ["/center", "/pay", "/paysuccess", "/trade"]

    //判断需要权限校验的路径
    const isChecked = checkedPath.some((item) => {
        return to.path.startsWith(item)
    })

    //拿到token和用户名
    const token = store.state.user.token
    const nickName = store.state.user.nickName

    //判断如果有用户名则直接放行
    if(nickName){
        return next()
    }


    //没有用户名判断需不需要权限校验
    if(isChecked){
        //如果右token
        if(token){
            store.dispatch("user/getUserNameRequest")
            next()
        }else{
            next("/login")
        }
    }else{
       //不需要权限校验的页面也有token则顺便获取用户名
       if(token){
         store.dispatch("user/getUserNameRequest")
       } 
       next()
    }

})

export default router